<template>
	<section class="scholl">
		<div class="border-box">			
			<ul v-if='flag'>
				<li class="pb30rem pt30rem border-b layout" 
					v-for="(item, index) in shopList">
					<router-link :to="'/shop/'+item.shop_id">
						<div class="pl30rem pr30rem layout">
							<div class="layout">
								<img class="shop-img" :src="img_url+item.shop_img" >
								<h2 class="fs30rem bold ml30rem">
									{{item.shop_name}}
								</h2>
							</div>
								
						</div>	
					</router-link>	
					<i  @click="deleteShop(item.log_id, index)"
						class="fs24 iconfont icon-shanchu mt5 mr10"
					></i>						
				</li>
			</ul>		
			<template v-else>
				<default :imgUrl="img" explain='您还没关注店铺'></default>
			</template>							
		</div>			
	</section>
</template>

<script>
	import { followShopInfo, delShop } from "@/api/shop";
	import Modal  from '@/utils/modal';
	import $toast from '@/utils/toast';
	import Default from "@/components/Default";	

	export default
	{
		 components:{
			Default	        
		},
		data() 
		{
			return{
				img_url  : process.env.IMG_URL,
				uid      : localStorage.getItem('uid'),
				flag     : false,
				img      : require('../../../assets/icon-goods.png'),
				shopList : []
			}
		},
		methods:{
			deleteShop(id,i)
			{
				Modal.confirm("确定删除关注吗？", "提示").then( res => {
					delShop(this.uid, id).then( res=> {
						this.shopList.splice(i, 1);
						$toast('删除成功');
					});
			});
				
			}
		},
		created()
		{
			followShopInfo( this.uid ).then( res => {
				this.shopList = res.data;
				if(this.shopList.length > 0)
					this.flag = true;
				else
					this.flag = false;
			})
		}
	}
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;
		.shop-img{
			width: 90/28rem;
			height: 90/28rem;
			border-radius: 100%;
		}
		.c959595{
			color: #959595;
		}
		
	}
	.border-box * {
		box-sizing: border-box;
	}
	
	
</style>

